<!-- 底部tabbar -->
<template>
  <div class="tabbar">
    <div class="tabbar-box">
      <div
        class="tabbar-item"
        v-for="(tabbar, tabbarIndex) in tabbarData"
        @click="changeTarbar(tabbar, tabbarIndex)"
        :class="currentIndex == tabbarIndex ? 'currentTabbar' : ''"
        :style="
          currentIndex == tabbarIndex
            ? `background-image:url(${tabbar.clickIcon})`
            : `background-image:url(${tabbar.icon})`
        "
        v-show="tabbar.name != '告警管理'"
      >
        <div class="tabbar-name">
          {{ tabbar.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { useRoute, useRouter } from "vue-router";
import { useFullScreenCard } from "@/stores/slg/fullscreencard";
import { UseHeaderName } from "@/stores/headerName";
import { UseLocation } from "@/stores/location";
import emits from "@/utils/emits";
import { UseScreenEqTree } from "@/stores/screen/equipementTree";
import { usehidenStore } from "@/stores/hidenEdit";
const location = UseLocation();
const { getEquipementTree } = UseScreenEqTree();
const { setHeaderName } = UseHeaderName();
const uf = useFullScreenCard();
const currentIndex = ref(0);
const router = useRouter();
const route = useRoute();
const { setShow, setShowReConnect } = usehidenStore();
const tabbarData = [
  {
    name: "首页",
    route: "home",
    type: "route",
    icon: requireImgUrl("image/tabbar", "模块"),
    clickIcon: requireImgUrl("image/tabbar", "模块_选中"),
  },
  {
    name: "告警管理",
    route: "alert",
    type: "route",
    icon: requireImgUrl("image/tabbar", "模块"),
    clickIcon: requireImgUrl("image/tabbar", "模块_选中"),
  },
  // { name: '应急广播', type: 'button', icon: requireImgUrl('image/tabbar', '应急广播'), clickIcon: requireImgUrl('image/tabbar', '应急广播点击') },
  {
    name: "视频管理",
    type: "button",
    icon: requireImgUrl("image/tabbar", "模块"),
    clickIcon: requireImgUrl("image/tabbar", "模块_选中"),
  },
  // {
  //   name: "鹰眼视角",
  //   type: "button",
  //   icon: requireImgUrl("image/tabbar", "模块"),
  //   clickIcon: requireImgUrl("image/tabbar", "模块_选中"),
  // },
  // { name: '运维管理', route: 'itPage', type: 'route', icon: requireImgUrl('image/tabbar', '模块'), clickIcon: requireImgUrl('image/tabbar', '模块_选中') },
];
const changeTarbar = async (tabbar: any, tabbarIndex: any) => {
  if (tabbar.type == "route" && tabbar.route) {
    currentIndex.value = tabbarIndex;
    router.push(tabbar.route);
    uf.setCardShow(false);
    uf.setbroadcastShow(false);
    uf.setHKARShow(false);
    setHeaderName(tabbar.name);
    setShowReConnect(true);
    setShow(true);
    emits.emit("SWITCH_AR_STATUS", false);
  } else {
    currentIndex.value = tabbarIndex;
    if (tabbar.name == "视频管理") {
      // await getEquipementTree();
      uf.setCardShow(true);
      uf.setbroadcastShow(false);
      uf.setHKARShow(false);
      setHeaderName("视频管理");
      setShow(false);
      setShowReConnect(false);
      emits.emit("SWITCH_AR_STATUS", false);
    } else if ((tabbar.name = "鹰眼视角")) {
      uf.setbroadcastShow(false);
      uf.setCardShow(false);
      uf.setHKARShow(true);
      setShowReConnect(false);
      setShow(false);
      // setHeaderName('鹰眼视角')
      // emits.emit('SWITCH_AR_STATUS', true)
    } else {
      uf.setCardShow(false);
      uf.setbroadcastShow(false);
      uf.setHKARShow(false);
      emits.emit("SWITCH_AR_STATUS", false);
    }
  }
};
const initTarbar = () => {
  switch (route.name) {
    case "home":
      currentIndex.value = 0;
      break;
    case "alert":
      currentIndex.value = 1;
      break;
  }
};
watch(
  () => route.name,
  (newValue) => {
    initTarbar();
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  initTarbar();
});
onUnmounted(() => {});
</script>

<style scoped lang="scss">
.tabbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0%;
  z-index: 4001;
  width: 100%;
  background: url("../../assets/image/tabbar/下装饰.png") center no-repeat;
  background-size: 100% 100%;

  .tabbar-box {
    display: flex;
    width: 100%;
    justify-content: center;

    .tabbar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 26px 20px;
      box-sizing: border-box;
      margin-left: 10px;
      cursor: pointer;
      width: clamp(7.75rem, 6.46vw, 15.5rem);
      height: clamp(2.5rem, 2.08vw, 5rem);
      transform: translateY(-50%);
      background: no-repeat center;
      background-size: 100% 100%;

      .tabbar-icon {
        width: clamp(2.375rem, 1.98vw, 4.75rem);
        height: clamp(2.375rem, 1.98vw, 4.75rem);
      }

      .tabbar-name {
        color: rgba(255, 255, 255, 1);
        font-size: clamp(1rem, 0.83vw, 2rem);
        text-shadow: 0px 0px 4px #19d0f5;
        font-weight: bold;
      }
    }

    .currentTabbar {
      .tabbar-name {
        color: rgba(99, 236, 255, 1);
        text-shadow: 0px 0px 4px #2b73ff;
      }
    }
  }
}
</style>
